• The ViewBox Control
• Sample ViewBoxes
• Merge JSON data into an HTML ViewBox Template
• Editing Data in a ViewBox
• Selectable Elements
• ViewBox as a Basic List Control
• ViewBox State
• Creating a Step Control Using a ViewBox
• Getting Data for the Current Row in a ViewBox
• ViewBox Layout Controls
• Populating a ViewBox from a REST API

ViewBox State

Description

The term 'state' is used to describe state information. This information can be about data or it can be about other things, like portions of the view. It can be information about whether data is dirty, information that identifies data, or information that sets the background color of a view.

A button being used to set state data to replace existing values

This can be very useful in displaying temporary data where you don't want to make any alterations to the actual data. For example, say you have data coming out of a record that includes 'firstname', 'lastname', 'city', and 'zip'. When the 'firstname' changes, i.e. is updated on the client, that change needs to be synched with the server. Having a state object, like {firstnameIsDirty:true}, will make the html that is spit out by the viewbox template show the dirty state information about the 'firstname' change, without passing this information on to the server. To sum things up, the state variable gets information into the template html without having to place this information in the data on the server.State information is generated using javascript functions such as getState(), setState(), and clearState(). For more information on the ViewBox state watch this video or follow the guide below.

Create a Button that Sets the ViewBox State

1. In the UX Builder on the UX Controls page open the 'Data Controls'. Click on the [ViewBox] option to add a viewbox control to the component.

   

2. Highlight the viewbox control. In the properties list click the button next to the 'ViewBox properties' property in the ViewBox Properties section.

   

3. Open the ViewBox Builder's 'Data Source' pane. Click the button next to the 'ViewBox type' property and select the 'Data' option.

   

4. In the 'ViewBox Data' section set the 'Datasource type' property to 'Static JSON'.

   

5. Click the button next to the 'Static JSON' property.

   

6. Add a pair of curly brackets for to the Static JSON Data dialog.

   {}

   

7. Open the ViewBox Layout pane. Select the 'Freeform editor' option.

   

8. Add the following HTML to the freeform layout the click OK to close the ViewBox Builder:

   Value of [temp].state.var1: <b>{[temp].state.var1||No value set}</b>

   

9. On the UX Controls page open the 'Other Controls' menu. Click on the [Button] option to add a button control to the component.

   

10. In the properties list under the Button Properties set the 'Button text' to read "Set value in ViewBox 'State' object".

    

11. Scroll down the properties list to the 'Javascript - (Touch, Mouse, Pointer Events) section and click the button next to the 'click' property.

    

12. In the 'Edit Click Event' dialog select the 'Text mode' radio button. Add the following javascript to the dialog and click 'Save'.

    var vb = {dialog.object}.getControl('viewbox1');
    vb.setState({'var1': 'ViewBox is awesome'});
    vb.refresh();

    

13. Run the component in Live Preview.

    

14. Click on the button control and you should see the new state.